<template>
  <div class="home-page">
    <HeaderComponent></HeaderComponent>
    <SearchBar @search_props="handleSearchProps"></SearchBar>
    <CategoryFilter @category_id="handleCategoryChange"></CategoryFilter>
    <NavigationList
      :category_id="category_id"
      :search_title="search_title"
    ></NavigationList>
  </div>
</template>

<script>
import HeaderComponent from "@/views/home/homePage/Header.vue";
import SearchBar from "@/views/home/homePage/SearchBar.vue";
import CategoryFilter from "@/views/home/homePage/CategoryFilter.vue";
import NavigationList from "@/views/home/homePage/NavigationList.vue";
export default {
  name: "Home",
  data() {
    return {
      category_id: null,
      search_title: "",
    };
  },
  components: {
    HeaderComponent,
    SearchBar,
    CategoryFilter,
    NavigationList,
  },
  methods: {
    handleCategoryChange(id) {
      this.category_id = id;
    },
    handleSearchProps(val) {
      this.search_title = val;
      console.log("到底变没变", val);
    },
  },
};
</script>

<style lang="less" scoped>
.home-page {
  margin-left: 108.5px;
  margin-right: 108.5px;
  padding: 32px;
}
</style>
